﻿<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}
			
			.wdiv {
				min-width: 300px;
			}
			
			.wdiv>ul>div {
				border: 1px solid darkgray;
				border-radius: 7px;
				margin: 5px;
				background-color: gainsboro;
			}
			
			.wdiv>ul>div>li {
				background-image: url(img/right.png);
				background-repeat: no-repeat;
				background-position: 10px 10px;
				text-indent: 40px;
				font-family: "微软雅黑";
				font-size: 20px;
				font-weight: bold;
				height: 50px;
				line-height: 50px;
			}
			
			.wdiv>ul>div>li+div {
				background-color: white;
				border-radius: 0px 0px 7px 7px;
				text-indent: 40px;
				font-family: "微软雅黑";
				font-size: 20px;
				height: 100px;
				border-top: 1px solid darkgray;
				line-height: 100px;
				display: none;
			}
			.show{
				display: block;
			}
			.notshow{
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="bigdiv1" class="wdiv">
			<ul>
				<div>
					<li>first</li>
					<div>i'm first</div>
				</div>
				<div>
					<li>second</li>
					<div>i'm second</div>
				</div>
				<div>
					<li>third</li>
					<div>i'm third</div>
				</div>
			</ul>
		</div>
		<script src="手风琴组件.js" type="text/javascript" charset="utf-8"></script>
		<script>
		    mytab.a(".wdiv");
		    mytab.b();
		</script>
	</body>

</html>